<template>
  <div v-loading="loading" class="container" element-loading-text="拼命加载中">
    <!-- <el-image style=" width: 500px" :src="require('@/assets/blogo.png')" fit="fill"></el-image> -->

    <div class="login-wrapper">
      <h3 class="header">督办</h3>
      <el-form
        ref="loginForm"
        class="form-wrapper"
        :model="form"
        :rules="rules"
        label-width="80px"
        @submit.native.prevent
      >
        <el-form-item prop="userno" label="用户名">
          <el-input
            v-model="form.userno"
            type="text"
            name="userno"
            clearable
            placeholder="请输入账号"
            class="input-item"
            @keyup.enter.native="loginClick"
          />
        </el-form-item>

        <el-form-item prop="pwd" label="密码">
          <el-input
            v-model="form.pwd"
            type="password"
            name="password"
            clearable
            placeholder="请输入密码"
            class="input-item"
            show-password
            @keyup.enter.native="loginClick"
          />
        </el-form-item>
        <el-form-item prop="inputCode" label="验证码">
          <span style="display: flex">
            <el-input
              ref="inputCode"
              v-model="inputCode"
              type="text"
              style="width: 175px"
              placeholder="请输入验证码"
              class="input-item"
              clearable
            />

            <span id="spancode" class="input-code" @click="createCode">
              <Sldentify :identify-code="code"></Sldentify>
            </span>
          </span>
        </el-form-item>
        <el-form-item>
          <el-button class="btn" native-type="submit" @click="loginClick">登录</el-button>
        </el-form-item>
      </el-form>
      <!-- <div style="text-align: right">
        <el-button type="warning" @click="onLink">督办登录</el-button>
      </div> -->
    </div>
  </div>
</template>

<script>
import Sldentify from '@/components/SIdentify'
import { OAuthLogin } from '@/api/index.js'
export default {
  name: 'Login',
  components: { Sldentify },
  data() {
    return {
      code: '',
      inputCode: '',
      form: {
        userno: '',
        pwd: ''
      },
      depselects: [],
      rules: {
        userno: [{ required: true, message: '用户名不能为空!', trigger: 'blur' }],
        pwd: [{ required: true, message: '密码不能为空!', trigger: 'blur' }]
      },
      loading: this.dbCode ? true : false,
      dbCode: this.$route.query.code
    }
  },
  async created() {
    if (this.dbCode) {
      await this.codeLogin()
    }
  },
  mounted() {
    this.createCode()
  },
  methods: {
    onLink() {
      var type = 'code'
      var id = 'eYq7uqeq5uqfqOufqfq5'
      var scope = 'openid'
      var uri = encodeURIComponent('http://101.43.187.9:8020/#/login')
      var url = `https://uc-test.poly.com.cn/sso/polyOAuth/authorize?response_type=${type}&client_id=${id}&redirect_uri=${uri}&scope=${scope}`
      window.location.href = url
    },
    async codeLogin() {
      this.loading = true
      try {
        this.$store
          .dispatch('user/codeLogin', { code: this.dbCode })
          .then(() => {
            console.log('J')
            if (this.$route.query.redirect == undefined) {
              this.$router.push('/')
            } else {
              if (this.$store.state.user.MenuList[0].isa9common != null) {
                this.$router.push(this.$store.state.user.MenuList[0].isa9common)
              } else {
                this.$router.push(this.$store.state.user.MenuList[1].isa9common)
              }
            }
            this.$message.success('登录成功')
          })
          .catch(err => {
            console.log(err)
          })
      } finally {
        this.loading = false
      }
    },
    createCode() {
      let text = ''
      const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
      // 设置验证码长度，
      for (let i = 0; i < 4; i++) {
        text += possible.charAt(Math.floor(Math.random() * possible.length))
      }
      this.code = text
    },
    loginClick() {
      this.$refs.loginForm.validate(valid => {
        this.loading = true
        if (valid) {
          if (this.inputCode == '') {
            this.$message.error('请输入验证码')
            return (this.loading = false)
          }
          if (this.inputCode.toLowerCase() != this.code.toLowerCase()) {
            this.$message.error('验证码错误')
            this.inputCode = ''
            this.createCode()
            return (this.loading = false)
          }
          this.$store
            .dispatch('user/Login', this.form)
            .then(() => {
              console.log('J')
              if (this.$route.query.redirect == undefined) {
                this.$router.push('/')
              } else {
                if (this.$store.state.user.MenuList[0].isa9common != null) {
                  this.$router.push(this.$store.state.user.MenuList[0].isa9common)
                } else {
                  this.$router.push(this.$store.state.user.MenuList[1].isa9common)
                }
                // const text = this.$store.state.user.MenuList.some(item => {
                //   return item.path == this.$route.query.redirect
                // })
                // if (!text) {
                //   if (this.$route.query.redirect != undefined) {
                //     this.$router.push(this.$route.query.redirect)
                //   } else if (this.$store.state.user.MenuList[0].isa9common != null) {
                //     this.$router.push(this.$store.state.user.MenuList[0].isa9common)
                //   } else {
                //     this.$router.push(this.$store.state.user.MenuList[1].isa9common)
                //   }
                //   // this.$router.push('/')
                // } else {
                //   this.$router.push(this.$route.query.redirect)
                // }
              }
              this.$message.success('登录成功')
              this.loading = false
            })
            .catch(err => {
              this.createCode()
              console.log(err)
              this.loading = false
            })
        } else {
          this.loading = false
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: row;
  align-items: center;

  padding: 30px;
  height: 100%;
  width: 100%;
  background: url('~@/assets/logo/login-bg1.jpg') center/cover no-repeat;
}

.login-wrapper {
  width: 500px;
  padding: 20px;
  margin: 0 auto;
  // background-color: rgba(0, 0, 0, 0.35);
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}

.header {
  font-size: 24px;
  // font-weight: bold;
  margin: 0;
  margin-bottom: 15px;
  color: #000;
}

::v-deep .input-code .s-canvas canvas {
  margin-top: 0;
}
.input-item:placeholder {
  text-transform: uppercase;
}

.btn {
  width: 100px;

  height: 40px;
  font-size: 18px;
  cursor: pointer;
  text-align: center;
  background-color: #000;
  color: #fff;
}

.msg {
  text-align: center;
  line-height: 88px;
}

a {
  text-decoration-line: none;
  color: #abc1ee;
}
</style>
